<template>
  <div>
    <Contents>
      <div class="classify">
        <van-sidebar v-model="activeKey">
          <van-sidebar-item
            :title="item.name"
            v-for="(item, index) in cate"
            :key="item.id"
            @click="onChange(index)"
          />
        </van-sidebar>

        <div class="classifys">
          <div class="classify_my_swipe">
            <van-swipe
              class="my-swipe"
              :autoplay="3000"
              indicator-color="white"
            >
              <van-swipe-item>1</van-swipe-item>
              <van-swipe-item>2</van-swipe-item>
              <van-swipe-item>3</van-swipe-item>
              <van-swipe-item>4</van-swipe-item>
            </van-swipe>
          </div>
          <div class="classifyBox1">
            <div class="classifyBox" v-for="item in showCates" :key="item.id">
              <img :src="item.icon" alt="" class="classify_img" />
              <p class="classify_name">{{ item.name }}</p>
            </div>
          </div>
        </div>
      </div>

      <div class="box"></div>
    </Contents>
  </div>
</template>
<script>
import Contents from "../components/content/contents"; //引入子组件（容器组件）

import Vue from "vue";
import { Sidebar, SidebarItem } from "vant";
Vue.use(Sidebar);
Vue.use(SidebarItem);
export default {
  components: {
    //注册组件
    Contents,
  },
  data() {
    return {
      activeKey: 0,
      index: 0,
      navData: [], //分类数据
      swiperList: [], //轮播图数据
      cate: [
        {
          name: "所有分类",
          id: "1",
        },
        {
          name: "居家",
          id: "2",
        },
        {
          name: "配件装饰",
          id: "3",
        },
        {
          name: "服装",
          id: "4",
        },
        {
          name: "电器",
          id: "5",
        },
      ],
    };
  },
  mounted() {
    // 分类数据
    this.$Api.classify().then((res) => {
      console.log(res.data.data);
      this.navData = res.data.data;
    });

    // 请求轮播图数据
    this.$Api.swiperList().then((res) => {
      console.log(res.data.data);
      this.swiperList = res.data.data;
    });
  },
  methods: {
    onChange(id) {
      // console.log(id);
      this.index = id;
    },
  },
  computed: {
    showCates: function () {
      // console.log(this.index);
      var res = [];
      if (this.index == 0) {
        res = this.navData;
      } else {
        //  2                    1  * 7  ,   1*7+7
        res = this.navData.slice((this.index - 1) * 7, this.index * 7);
      }
      // console.log(res);
      return res;
    },
  },
};
</script>
<style scoped>
.box {
  width: 100%;
  height: 100px;
}
.classify {
  width: 100%;
  display: flex;
}

.classifys {
  margin-left: 20%;
  width: 80%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.classifyBox {
  width: 33%;
  text-align: center;
 
}
.classifyBox1{
margin-top: 10px;
display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.classify_img {
  width: 60%;
}

.classify_name {
  font-size: 12px;
}
.classify_my_swipe {
  width: 320px;
   
}
.my-swipe .van-swipe-item {
  width: 200px;
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
}
.van-sidebar {
  /* display: flex; */
  /* z-index: 1; */
  position: fixed;
}
</style>